<style lang="less">
  .trend-pics-for-house-detail {
    background: #f2f2f2;
    height: 400px;
    .trend-pics {
      margin: 0 auto;
      display: flex;
      align-items: center;
      .echart {
        height: 350px;
        flex: 1 1 0;
      }
    }
  }
  .trend-pics-for-house-detail span{
      font-size: 20px;
      margin: 5px 5px;
    }
</style>

<template>
  <div class="trend-pics-for-house-detail">
    <span>房价走势图 </span>
    <div class="trend-pics">
      <div class="echart" ref="echart"></div>
    </div>
  </div>
</template>


<script>
  export default {
    props: ['trendPics'],
    data () {
      return {}
    },
    mounted () {
      var option = {
        title: {
          text: '单位: 元/平',
          right: '20%',
          textStyle: {
            fontSize: 12,
            color: '#275fd7',
            fontWeight: 'normal'
          },
          padding: 15
        },
        color: ['#275fd7'],
        tooltip: {
          trigger: 'axis',
          color: '#000',
          axisPointer: {
            type: 'shadow'
          },
          formatter (data) {
            return `${data[0].name}<br>价格:${data[0].value}元`
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            }
          }
        ],
        series: [
          {
            name: '价格曲线',
            type: 'line',
            symbolSize: 13,
            lineStyle: {
              normal: {
                width: 2,
                color: '#275fd7'
              }
            },
            itemStyle: {
              normal: {
                color: '#f7a35c',
                borderWidth: 2,
                borderColor: '#f7a35c',
                shadowColor: '#f7a35c'
              }
            },
            smooth: true,
            data: []
          },
          {
            name: '',
            type: 'bar',
            barWidth: '20%',
            data: []
          }
        ]
      }

      var newHouseChart = echarts.init(this.$refs.echart)
      var newTrendOption = _.cloneDeep(option)

      this.trendPics.forEach((item) => {
        newTrendOption.xAxis[0].data.push(item.levelInfo + '月')
        var data = item.verticalInfo
        newTrendOption.series[0].data.push(data)
        newTrendOption.series[1].data.push(data)
      })
      newHouseChart.setOption(newTrendOption)
    }
  }
</script>

